<template>
	<div class="menu-box">
		<!--<ele-menu>
			<ele-menu-item>111</ele-menu-item>
			<ele-menu-item>222</ele-menu-item>
			<ele-submenu>
				<div slot="title">333</div>
				<ele-menu-item>333-1</ele-menu-item>
				<ele-submenu>
					<div slot="title">333-2</div>
					<ele-menu-item>333-2-1</ele-menu-item>
					<ele-menu-item>333-2-2</ele-menu-item>
				</ele-submenu>
			</ele-submenu>
		</ele-menu>-->

		<ele-menu>
			<template v-for="(item,index) in list">
				<!--通过 item.children 判断是否还有子节点，循环结束标记，否则会进入死循环-->
				<ele-menu-item v-if="!item.children" :key="`menu_item_${index}`">{{item.title}}</ele-menu-item>
				<re-submenu v-else :key="`menu_item_${index}`" :parent="item" :index="index"></re-submenu>
			</template>
		</ele-menu>
	</div>
</template>

<script>
	import menuComponents from '_c/menu';
	import reSubmenu from './Re-submenu';

	const {eleMenu, eleMenuItem, eleSubmenu} = menuComponents;

	export default {
		name: "Menu-page",
		components: {eleMenu, eleMenuItem, eleSubmenu, reSubmenu},
		data() {
			return {
				list: [
					{title: '111'},
					{title: '222'},
					{title: '333',
						children: [
							{title: '333-1'},
							{title: '333-2',
								children: [
									{title: '333-2-1'},
									{title: '333-2-2',
										children: [
											{title: '333-2-2-1'},
											{title: '333-2-2-2',
												children: [
													{title: '333-2-2-2-1'},
													{title: '333-2-2-2-2'}
												]
											}
										]
									},
								]
							}
						],
					},
				]
			}
		}
	}
</script>

<style lang="less">
	.menu-box {
		margin: 20px;
		width: 300px;
		height: 400px;
	}
</style>
